require(['config'], function() {
  require(['jquery', 'template', 'loadH','loadF2','loadM', 'jquery.cookie'], function($,template){
    

      $.cookie.json = true
      const _products =[]
      _products.push($.cookie('detail'))
      const html = template('hot-template', {products: _products})
      console.log('获取到数据：', _products)
      $('.hot').append(html)


    //渲染photo
    $.getJSON('http://www.xiongmaoyouxuan.com/api/detail?id='+$.cookie('detail').id, resData => {
      const photo = resData.data.detail.photo
       const html = template('hot1-template', {photo})
       console.log('获取到数据：', photo)
      $('.hot1').append(html)
    })


    


      
     










      let amount=1
      $('.amount').text(amount)
      $('.plus').click(()=>{
        amount+=1
        $('.amount').text(amount)
      })
      $('.minus').click(()=>{
        if(amount>1)amount-=1
        $('.amount').text(amount)
      }) 

      //选择尺码框
      $('.sz').click((e)=>{
        $('.sz').css('border','1px solid #ccc')
        $(e.target).css('border','1px solid black')
      })


      /* 添加购物车：为按钮绑定点击事件--利用事件委派 */
      $('.add-to-cart').on('click', e => {
      
      // 构建当前选购商品的对象
      const curr = {
        id: _products[0].id,
        title: _products[0].title,
        price: _products[0].price,
        image: _products[0].image,
        originprice:_products[0].originprice,
        amount: amount
      }
      console.log(curr)
      // 配置，保存或读取cookie时，自动实现JSON转换
      $.cookie.json = true
      // 从 cookie 中读取已有保存的购物车数组数据
      const cart = $.cookie('cart') || []
      // 判断购物车数组中是否存在当前选购的商品，
      // 如果存在，则修改数量即可。不存在则添加到数组中
      const index = cart.findIndex(prod => prod.id === curr.id)
      if (index !== -1) { // 存在已选购的当前商品
        cart[index].amount += amount
      } else { // 不存在当前选购的商品，则添加到数组中
        // 将当前选购商品保存到 cart 数组中
        cart.push(curr)
      }
      // 将购物车数组保存到 cookie 中
      $.cookie('cart', cart, {expires: 70 ,path:'/'})

      console.log($.cookie('cart'))
    })

      const small=document.querySelector('.small')
      const big=document.querySelector('.big')
      const fdj=document.querySelector('.fdj')
      const img2=big.querySelector('img')

      
      small.addEventListener('mousemove',function(event){

        let _top = event.offsetY-60
        let _left = event.offsetX-60

        if(_left<0)_left=0
        if(_top<0)_top=0

        if(_left>360)_left=360
        if(_top>360)_top=360

        fdj.style.top=_top+'px';
        fdj.style.left=_left+'px';

        img2.style.top=-4*_top+'px';
        img2.style.left=-4*_left+'px';
    },false)

    small.addEventListener('mouseenter',function(){
        fdj.style.display='block';
        big.style.display='block';
    },false)
    small.addEventListener('mouseleave',function(){
        fdj.style.display='none';
        big.style.display='none';
    },false)

    //添加购物车抛物线效果
    var $ball = $('#ball')[0];
    $('.hot').on('click', '.add-to-cart', evt => {
        $ball.style.display='block';
        console.log(evt.clientX,evt.clientY)
        $ball.style.top = evt.clientY+'px';
        $ball.style.left = evt.clientX+'px';
        $ball.style.transition = 'left 0s, top 0s';
        setTimeout(()=>{
            $ball.style.top = '90%';
            $ball.style.left = '90%';
            $ball.style.transition = 'left 1s linear, top 1s ease-in';
        }, 0)
        setTimeout(()=>{
          $ball.style.display='none';
        },1000)
    })
    
  })
})